<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(brand, index) in brands" align="center">
            <td>{{ index + 1 }}</td>
            <td>{{ brand.brandName }}</td>
            <td>{{ brand.companyName }}</td>
            <td>{{ brand.ordered }}</td>
            <td>{{ brand.description }}</td>
            <td v-if="brand.status == 1">启用</td>
            <td v-else>禁用</td>
            <td>
                <a :href="'addBrand.html?id=' + brand.id">修改</a>
                <input type="button" value="删除" @click="deleteBrand(brand.id)">
            </td>
        </tr>
    </table>
</div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            brands: []
        },
        methods: {
            getBrandList() {
                axios({
                    url: '/brand-case-vue/brandAll',
                    method: 'GET'
                }).then((response) => {
                    this.brands = response.data;
                });
            },
            deleteBrand(id) {
                axios({
                    url: '/brand-case-vue/brandDel?id=' + id,
                    method: 'GET'
                }).then((response) => {
                    if (response.data) {
                        this.getBrandList();
                    } else {
                        alert("删除失败");
                    }
                });
            }
        },
        mounted() {
            this.getBrandList();
        }
    });
</script>
</html>
